<script setup>
import {ref} from "vue";
import {useTokenStore} from "@/js/util/token";
import request from "@/js/util/request";
import {saveUserService} from '@/js/api/myMessage'
import {ElMessage} from "element-plus";
const tokenStore = useTokenStore()
const isSet = ref(true)//信息是否允许修改
const isUpdate = ref(true)//修改、保存、取消按钮的显示
const user = ref({//用户信息数据模型
  username:'DUIT',
  phone:'17833657432',
  email:'3098765734@qq.com',
  sex:'',
  identity:'445224200709212321',
  avatar:'https://gitee.com/fangzexin/drawing-bed/raw/image/admin.jpg',
  industry: '学生',
  birthday: '2001-09-08',
})
const saveUser = async () => {
  isUpdate.value=true;
  isSet.value=true;
  let result = await saveUserService(user.value)
  if(result.data.flag){
    useTokenStore().setToken(result.data.data)
    ElMessage.success(result.data.msg)
  }else{
    ElMessage.error(result.data.msg)
  }
}
const showUser = ()=>{
  let url = "/userInfo";
  let token = useTokenStore().token;
  if(token){//有token就查询用户信息
    request.get(url).then(function (result){
      user.value = result.data.data
    })
  }
}
const handleAvatarSuccess = (result) => {
  user.value.avatar = result.data
}


showUser()
</script>
<template>
  <el-descriptions title="基本信息" column=1>
    <el-descriptions-item label="用户名"><el-input :disabled="isSet" v-model="user.username"></el-input></el-descriptions-item>
    <el-descriptions-item label="性别">
      <el-radio-group v-model="user.sex" :disabled="isSet">
        <el-radio label="男">男</el-radio>
        <el-radio label="女">女</el-radio>
        <el-radio label="">保密</el-radio>
      </el-radio-group>
    </el-descriptions-item>
    <el-descriptions-item label="生日">
      <el-date-picker
          :disabled="isSet"
          v-model="user.birthday"
          type="date"
          placeholder="你的生日"
          size="default"
      />
    </el-descriptions-item>
    <el-descriptions-item label="行业">
      <el-input :disabled="isSet" v-model="user.industry"></el-input>
    </el-descriptions-item>
    <el-descriptions-item label="手机号"><el-input :disabled="isSet" v-model="user.phone"></el-input></el-descriptions-item>
    <el-descriptions-item label="邮箱号"><el-input :disabled="isSet" v-model="user.email"></el-input></el-descriptions-item>
    <el-descriptions-item label="身份证号">
      <el-input :disabled="isSet" v-model="user.identity"></el-input>
    </el-descriptions-item>
    <el-descriptions-item label="用户头像">
      <el-upload
          class="avatar-uploader"
          action="/api/uploadImg"
          :show-file-list="false"
          :auto-upload="true"
          name="file"
          :headers="{'Authorization':tokenStore.token}"
          :on-success="handleAvatarSuccess"
          :disabled="isSet"
      >
        <img v-if="user.avatar" :src="user.avatar" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-descriptions-item>
    <el-descriptions-item>
      <el-button v-if="isUpdate" @click="isUpdate=false; isSet=false" type="danger">修改</el-button>
      <span v-else>
        <el-button @click="saveUser" type="primary">保存</el-button>
        <el-button @click="isUpdate=true; isSet=true" type="danger">取消</el-button>
      </span>
    </el-descriptions-item>
  </el-descriptions>
</template>

<style>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>